<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
    <el-form>

      <el-row :gutter="20" style=" margin-bottom = 25px ">
         <el-col :span="12">
                <el-form-item label="学科名称：" prop="tags">
                  <el-input
                  v-model="params.subjectName"
                    style="width: 180px;"
                    placeholder="搜索关键词"
                    class="filter-item"
                  ></el-input>

                    <el-button style="margin-left:10px" @click="cleardata">清除</el-button>
                     <el-button type="primary" @click="searchdata">搜索</el-button>
                </el-form-item>
              </el-col>
        <el-col :span="12" style="text-align:right">
           <el-button type="success" icon="el-icon-edit" @click="adddata">添加功能</el-button>
 </el-col>

        </el-row>
     </el-form>

     <!-- 数据提示记录 -->
        <el-alert
          :title="`数据一共有${total}条`"
           style="margin-bottom:15px"
          type="info"
          class="alert"
          show-icon
        ></el-alert>

      <!-- 表格 -->
    <el-table stripe :data="list">
          <el-table-column label="序号" type="index"/>
          <el-table-column label="学科名称" prop="subjectName"/>
          <el-table-column label="创建者" prop="username">
          </el-table-column>
          <el-table-column label="创建日期" prop="addDate"/>

          <el-table-column label="前台是否显示" prop="isFromDisplay">

            <template slot-scope="scope">
                {{scope.row.isFrontDisplay === 1 ? '是':'否'}}
            </template>

          </el-table-column>

          <el-table-column label="二级目录" prop="twoLevelDirectory"/>
          <el-table-column label="标签" prop="tags"/>
          <el-table-column label="题目数量" prop="totals"/>
          <el-table-column label="操作"  fixed="right" width="280">
            <template #default="{ row }">

              <el-button type="text" size="small" @click="handle1(row)">学科分类</el-button>
              <el-button type="text" size="small" @click="handle2(row)">学科标签</el-button>
              <el-button type="text" size="small" @click="showedit(row)">修改</el-button>
              <el-button type="text" size="small" @click="deldata(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

          <el-pagination
          background
           :current-page="params.page"
           :page-size="params.pagesize"
           :page-sizes="[10]"
          layout="->,prev, pager,next, sizes,jumper"
          :total="total"
          style="margin-top:20px"
          @size-change="handleSizeChange"
         @current-change="handleCurrentChange"
/>

      </el-card>
       <!-- 添加功能弹窗 -->
<el-dialog :title="tips" :visible.sync="isShowDialog">
   <el-form label-width="120px" ref="addForm" :model="formData" :rules="rules">
      <el-form-item label="学科名称" prop="subjectName">
        <el-input v-model="formData.subjectName" style="width:50%" placeholder="请输入学科名称" />
    <br>
      </el-form-item>

      <el-form-item label="是否显示" >
       <!-- <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949"
        @change="changeisFrontDisplay"
        > -->
       <el-switch
        v-model="formData.isFrontDisplay"
        active-color="#13ce66"
        inactive-color="#ff4949"
        active-value="1"
        inactive-value="0"
        >
      </el-switch>
    <br>
      </el-form-item>
   </el-form>

 <template v-slot:footer>
      <el-button @click="closedia">取消</el-button>
      <el-button type="primary" @click="submitAdd">确定</el-button>
    </template>
</el-dialog>

    </div>
  </div>
</template>

<script>
import { list, remove, add, update, detail } from '@/api/hmmm/subjects'
export default {
  name: 'shbjects-page',
  data () {
    return {
      formData: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [
          { required: true, message: '学科名称不为空', tigger: ['blur', 'change'] }

        ]
      },
      tips: '',
      // value: '1',
      isShowDialog: false,
      params: {
        // 关键词
        subjectName: null,
        // 页码
        page: 1,
        // 尺寸
        pagesize: 10
      },
      list: [],
      total: 0
    }
  },

  created () {
    // this.changeisFrontDisplay()
    this.getlist()
  },
  methods: {

    // 开关
    // changeisFrontDisplay () {
    //   if (this.value) {
    //     this.value = true
    //     this.formData.isFrontDisplay = 1
    //   } else {
    //     this.value = false
    //     this.formData.isFrontDisplay = 0
    //   }

    // 三元表达式
    // this.value ? this.value = true : this.value = false
    // this.value ? this.formData.isFrontDisplay = 1 : this.formData.isFrontDisplay = 0
    // },

    async getlist () {
      const { data } = await list(
        this.params
      )
      this.list = data.items
      this.total = data.counts
      // console.log(data.items)
    },
    // 清除功能
    cleardata () {
      this.params.subjectName = null
      this.getlist()
    },
    // 搜索功能
    searchdata () {
      this.params.page = 1
      this.getlist()
    },
    // 跳转功能
    handle1 (row) {
      // this.$router.push('/subjects/directorys')
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }// 要传递的参数
      })
    },
    handle2 (row) {
      // this.$router.push('/subjects/tags')
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }// 要传递的参数
      })
    },
    // 修改了每页条数后, 会造成页数的变化, 推荐从第一页重新开始展示
    // 改变尺码

    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      // 更新每页条数
      this.params.pagesize = val
      // 重置当前页
      this.params.page = 1
      // 调用方法, 重新请求
      this.getlist()
    },

    // 分页方法
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      // 更新当前页
      this.params.page = val
      // 调用方法, 重新请求渲染
      this.getlist()
    },
    // 删除
    async deldata (row) {
      this.$confirm('确定要删除?', '温馨提示').then(async () => {
        await remove(row)
        if (this.list.length === 1 && this.page > 1) {
          this.page--
        }
        this.$message.success('删除成功')
        this.getlist()
      }).catch(() => {

      })
    },

    // 添加功能的弹窗
    adddata () {
      this.tips = '新增学科'
      this.isShowDialog = true
    },

    // 关闭弹窗
    closedia () {
      this.formData = {
        subjectName: '',
        isFrontDisplay: 1
      }
      this.$refs.addForm.resetFields()
      this.isShowDialog = false
    },

    // 添加功能
    submitAdd () {
      this.$refs.addForm.validate(async flag => {
        if (!flag) return
        if (this.formData.id) {
          // 编辑操作
          await update(this.formData)
          this.$message.success('编辑成功')
        } else {
          await add(this.formData)
          // this.formData = {
          //   subjectName: '',
          //   isFrontDisplay: ''
          // }
          //   await add
        //     {
        //       subjectName: '',
        //       isFrontDisplay: '1'
        //     })
        }

        // 关闭
        this.closedia()
        this.getlist()
        this.$message.success('添加成功')
      })
    },
    // 修改功能
    async showedit (row) {
      this.tips = '修改学科'
      const { data } = await detail(row)
      this.formData = data
      this.isShowDialog = true
    }

  }

}

</script>

<style scoped lang='scss'>
.app-container{
  padding: 10px 15px;
}

</style>
